// 导入path插件
const path = require('path');
//导入静态页面生成插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//导入压缩插件
const TerserPlugin = require('terser-webpack-plugin');
//导入打包分析插件
const BundleWebpackPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;    
/* 
* model.exports:nodejs模块导出对象 
* mode 开发模式或生产模式 
* entry 用于指定打包的入口文件。webpack会从这些入口文件开始，构建内部依赖图，并打包所有依赖模块
* output 用于指定打包后的文件输出位置、文件名格式以及其他相关设置  
* module指的是项目中可被分割的最小功能单位。每个文件（如JavaScript、CSS、图片等）都被视为一个module.
* webpack通过分析这些module之间的依赖关系，构建依赖图（Dependency Graph），最终打包成浏览器可识别的静态资源
*/
module.exports = {
    mode: 'development', // 模式, development或production
    //设置此属性是为了方便查看打包后得源代码
    devtool: 'inline-source-map', // 开发环境下使用source-map,生产环境下使用hidden-source-map,eval-source-map
    entry: "./src/index.js",//入口文件
    output: {//输出文件
        path: path.resolve(__dirname ,'dist'), // 指定输出文件的目录，必须为绝对路径
        // filename: "bundle.js"// 定义输出文件的名称。可以使用[name]、[hash]等占位符动态生成文件名
        filename: "[name].[contenthash].js"// [name]会被替换为入口文件的名称，[contenthash]会根据内容生成一个唯一的哈希值，确保文件名在内容变化时也会变化，从而实现缓存优化
    },
    optimization: {
        minimize:true,//是否压缩
        minimizer:[new TerserPlugin()]//使用TerserPlugin压缩
    },
    /* 插件 
    * plugins:[new HtmlWebpackPlugin() ]可自动生成html,可不传参
    */
    plugins:[
        // 自动生成html文件
        new HtmlWebpackPlugin(
            {
                title: 'webpack打包测试',// 定义生成的html文件的标题
                filename: 'testIndex.html',// 定义生成的html文件的名称
                // template: 'src/index.html'// 定义html模板文件路径
            }
        ),
        // 打包分析插件
        new BundleWebpackPlugin({})
    ],
    module:{        
        rules: [
        //匹配css的规则
        {
            //用于匹配以 .css 结尾的字符串，且匹配时不区分大小写
            test: /\.css$/i,//\.转义'.' ,$匹配字符串的结尾,i 修饰符表示不区分大小写的匹配
            /*
            *用于指定处理特定文件类型时使用的 loader。
            *它是一个数组，可以包含多个 loader，webpack 会从右到左（或从下到上）依次应用这些 loader。
            */
            use: ['style-loader', 'css-loader']// 使用的loader,Loader 从右向左执行，例如 use: ['style-loader', 'css-loader'] 中先执行 css-loader。
        },
        //匹配图片的规则
        {
            test:/\.(png|jpg|jpeg|png|gif|svg)$/i,
            type: 'asset/resource', // 使用资源模块处理图片文件,将文件直接输出到输出目录并返回最终的 URL
        },
        //匹配js的规则
        { 
            test: /\.js$/, // 匹配所有以 .js 结尾的文件
            exclude: /node_modules/, // 排除 node_modules 目录下的文件
            use: {
                loader: 'babel-loader', // 使用 babel-loader 处理 JavaScript 文件
                options: {
                    presets: ['@babel/preset-env'] // 使用 @babel/preset-env 预设
                }
            }
        }
    ]},
    // 开发环境下使用 webpack-dev-server 开启热更新,还需要再去package.json中配置相关命令:scripts中添加“"start": "webpack serve --open"”
    devServer:{
        // 静态资源目录
        static: "./dist"
    },
    resolve:{
        alias: {
            // 设置别名，方便在代码中引用
            '@': path.resolve(__dirname, 'src'),
            '@utils': path.resolve(__dirname, 'src/utils'),
            '@assets': path.resolve(__dirname, 'src/assets')
        },
    }
    // EntryOptionPlugin
}